<template>
  <div class="broker mg-0">
    <div class="brokerContent bg-5d border-r boxS-i-4 pd-10">
      <div class="flex-1 broker_l">
        <div class="flex-left-nowrap">
          <div>
            <img src="../../assets/icon/broker.svg" alt="">
          </div>
          <div class="theme-color font-30 fontW-7 mgl-13">{{$t('set_broker.title')}}</div>
        </div>
        <div class="broker-text color-f font-20 font-f-ib fontW-b mgt-20">
          <div class="flex-left-nowrap" v-for="(item, i) in 9" :key="i">
            <div>{{(i + 1)}}、</div>
            <div>{{$t('set_broker.text_'+ (i + 1))}}
              <img v-if="i === 8" style="width:24px;" src="../../assets/icon/broker.svg" alt="">
            </div>
          </div>
        </div>
        <p></p>
      </div>
      <div class="broker_r flex-1">
        <div class="item">
          <div class="theme-color font-30 fontW-7">{{$t('set_broker.title_condition')}}</div>
          <div class="color-f font-20 font-f-ib fontW-b mgt-20">{{$t('set_broker.condition_a')}}</div>
          <div class="color-f font-20 font-f-ib fontW-b mgt-30">{{$t('set_broker.condition_b')}}</div>
          <div class="swapBox h-37 mgt-10">
            <div class="swapinput flex-1">
              <input class="text-r color-0 pdlr-10 boxS-i-4 border-r font-20" type="text" v-model="swapVal" placeholder="100.00">
            </div>
            <div class="swapbtn mgl-13">
              <el-button class="color-0 font-20 fontW-b text-s h-37" type="primary">{{$t('btn.swap')}}</el-button>
            </div>
          </div>
          <div class="color-f font-20 font-f-ib fontW-b mgt-20">{{$t('set_broker.follow')}}</div>
          <div class="swapBox h-37 mgt-10">
            <div class="swapinput flex-1">
            </div>
            <div class="swapbtn mgl-13">
              <el-button class="color-0 font-20 fontW-b text-s h-37" type="primary">{{$t('btn.forward')}}</el-button>
            </div>
          </div>
          <div class="color-f font-20 font-f-ib fontW-b mgt-10">{{$t('set_broker.validation')}}</div>
          <div class="swapBox h-37 mgt-10">
            <div class="swapinput flex-1">
              <input style="text-align:left;" class="text-r color-0 pdlr-10 boxS-i-4 border-r font-20" type="text" v-model="swapVal">
            </div>
          </div>
          <div class="color-f font-20 font-f-ib fontW-b mgt-10">{{$t('set_broker.email')}}</div>
          <div class="swapBox h-37 mgt-10">
            <div class="swapinput flex-1">
              <input style="text-align:left;" class="text-r color-0 pdlr-10 boxS-i-4 border-r font-20" type="text" v-model="swapVal">
            </div>
          </div>
          <div class="swapBox h-37 mgt-10">
            <div class="swapbtn">
              <el-button class="color-0 font-20 fontW-b text-s h-37" type="primary">{{$t('btn.validation')}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex;" class=" mgt-10">
      <div style="margin:0 1%;" class="flex-1"></div>
      <div style="margin:0 1%;" class="flex-1 theme-color font-20 fontW-b font-f-ib mgt-10">
        <p>{{$t('set_broker.tips')}}</p>
        <p>{{$t('set_broker.tips_a')}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swapVal: ''
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.broker {
  margin-top: 100px;
  .brokerContent {
    display: flex;
  }
  .broker_l {
    margin: 0 1%;
    .broker-text {
      line-height: 37px;
    }
  }
  .broker_r {
    margin: 0 2%;
    .item {
      width: 57%;
      .swapBox {
        display: flex;
        .swapinput {
          input {
            width: 100%;
          }
        }
        .swapbtn {
          width: 135px;
          /deep/.el-button--primary {
            background: #7de9ff;
            border: none;
            padding: 0;
          }
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
